<template>
	<div class="app-container">
		<el-card class="box-card">
			<template #header>
				<div class="card-header">
					<span>{{ isEdit ? "编辑设备" : "添加设备" }}</span>
				</div>
			</template>
			<el-form
				ref="formRef"
				:model="form"
				:rules="rules"
				label-width="120px"
				class="form-container"
			>
				<el-form-item label="设备名称" prop="name">
					<el-input v-model="form.name" placeholder="请输入设备名称" />
				</el-form-item>
				<!-- <el-form-item label="设备类型" prop="type">
					<el-select
						v-model="form.type"
						placeholder="请选择设备类型"
						style="width: 100%"
					>
						<el-option
							v-for="item in equipmentTypes"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item> -->
				<el-form-item label="设备状态" prop="isOperational">
					<el-select
						v-model="form.isOperational"
						placeholder="请选择设备状态"
						style="width: 100%"
					>
						<el-option
							v-for="item in equipmentStatus"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="安装位置" prop="location">
					<el-input v-model="form.location" placeholder="请输入安装位置" />
				</el-form-item>
				<el-form-item label="购买日期" prop="purchaseDate">
					<el-date-picker
						v-model="form.purchaseDate"
						type="date"
						placeholder="选择购买日期"
						value-format="YYYY-MM-DD"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="保修期限" prop="warrantyPeriod">
					<el-input-number
						v-model="form.warrantyPeriod"
						:min="0"
						:max="120"
						style="width: 100%"
					/>
					<span class="unit">个月</span>
				</el-form-item>
				<el-form-item label="维护周期" prop="maintenanceCycle">
					<el-input-number
						v-model="form.maintenanceCycle"
						:min="1"
						:max="12"
						style="width: 100%"
					/>
					<span class="unit">个月</span>
				</el-form-item>
				<!-- <el-form-item label="备注" prop="remark">
					<el-input
						v-model="form.remark"
						type="textarea"
						:rows="3"
						placeholder="请输入备注信息"
					/>
				</el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="handleSubmit">保存</el-button>
					<el-button @click="handleCancel">取消</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

const isEdit = computed(() => {
	return route.params.id !== undefined;
});

// 设备类型选项
const equipmentTypes = [
	{ label: "电梯", value: "elevator" },
	{ label: "消防设备", value: "fire" },
	{ label: "监控设备", value: "camera" },
	{ label: "门禁系统", value: "access" },
	{ label: "其他", value: "other" },
];

// 设备状态选项
const equipmentStatus = [
	{ label: "正常", value: true },
	{ label: "维护", value: false },
];

const form = ref({
	name: "",
	isOperational: true,
	location: "",
	createAt: "",
});

const rules = {
	name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
	isOperational: [
		{ required: true, message: "请选择设备状态", trigger: "change" },
	],
	location: [{ required: true, message: "请输入安装位置", trigger: "blur" }],
	createdAt: [{ required: true, message: "请选择购买日期", trigger: "change" }],
};

// 获取设备详情
const getEquipmentDetail = async (id) => {
	try {
		// TODO: 调用获取设备详情API
		// const res = await getEquipmentById(id)
		// form.value = res.data
	} catch (error) {
		console.error("获取设备详情失败:", error);
		ElMessage.error("获取设备详情失败");
	}
};

// 提交表单
const handleSubmit = async () => {
	if (!formRef.value) return;
	await formRef.value.validate(async (valid) => {
		if (valid) {
			try {
				// TODO: 调用保存设备API
				// if (isEdit.value) {
				// 	await updateEquipment(route.params.id, form.value)
				// } else {
				// 	await createEquipment(form.value)
				// }
				ElMessage.success("保存成功");
				router.push("/property-equipment/list");
			} catch (error) {
				console.error("保存设备失败:", error);
				ElMessage.error("保存失败");
			}
		}
	});
};

// 取消
const handleCancel = () => {
	router.back();
};

onMounted(() => {
	if (isEdit.value) {
		getEquipmentDetail(route.params.id);
	}
});
</script>

<style scoped>
.app-container {
	padding: 20px;
}
.form-container {
	max-width: 600px;
	margin: 0 auto;
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.unit {
	margin-left: 10px;
	color: #666;
}
</style>
